import { useEffect, useState } from "react";
import style from "./index.module.scss";

import Gonghui from "./gonghui";
import Zhubo from "./zhubo";
import Shenhao from "./shenhao";

import desc from "@/assets/images/annual-festival-1/desc.png";

import classNames from "classnames";
const Content = () => {
  const [type, setType] = useState(1);

  return (
    <div className={style.contentBox}>
      <div className={style.descBox}>
        <img src={desc} alt="图" />
      </div>
      <div className={style.btn_box}>
        <div
          className={`${style.btn_switch}  ${
            type === 1 ? style.btn_switch1 : style.btn_switch1_dis
          }`}
          onClick={() => setType(1)}
        ></div>
        <div
          className={`${style.btn_switch} ${
            type === 2 ? style.btn_switch2 : style.btn_switch2_dis
          } `}
          onClick={() => setType(2)}
        ></div>
        <div
          className={`${style.btn_switch} ${
            type === 3 ? style.btn_switch3 : style.btn_switch3_dis
          } `}
          onClick={() => setType(3)}
        ></div>
      </div>
      {type === 1 && <Gonghui />}
      {type === 2 && <Zhubo />}
      {type === 3 && <Shenhao />}
    </div>
  );
};

export default Content;
